{template header}

<!--main-->
<div class="container">



    <div class="panel panel-default">
        <div class="panel-heading">发送贺卡</div>
        <div class="panel-body">

            <section label="Copyright Reserved by PLAYHUDONG." style="margin: 5px 0px 0px;
    padding: 16px;
    margin:1em 0;
    border-style: none;
    line-height: 25px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow:0px 2px 8px rgb(153, 153, 153)" id="shifu_c_034" donone="shifuMouseDownCard(&#39;shifu_c_034&#39;)">
                <div>
                    温馨提示：预约日期最早可选明天，贺卡将在预约日期4：00送达，送达之前发卡人可删除，送达之后收卡人可删除。
                </div>
            </section>

            <div class="row">
                <div class="col-md-3"></div>
                <div class="col-md-6">




                    <form id="form1" class="form-horizontal" method="POST" action="{tsUrl('user','message',array('ts'=>'cardpreview'))}">

                        <div class="form-group">
                            <label  class="col-sm-2 control-label">收卡人：</label>
                            <div class="col-sm-10">
                                <div style="padding-top: 7px;">
                                    <img alt="{$strTouser[username]}" class="m_sub_img" src="{$strTouser[face]}" width="16" align="absmiddle" /> {$strTouser['username']}
                                </div>

                            </div>
                        </div>
                        <div class="form-group">
                            <label  class="col-sm-2 control-label">模板：</label>
                            <div class="col-sm-10">
                                <div class="piclist">
                                    <ul>
                                        <!--{for $i=1;$i<=5;$i++ }-->
                                            <li style="padding-right: 10px">
                                                <div><img src="{SITE_URL}app/{$GLOBALS['TS_URL']['app']}/images/{$i}.png" style="width: 100px">

                                                </div>
                                                <div style="text-align: center">
                                                    <input type="radio" name="tplid" value="{$i}" {if $tplid==$i}checked{/if}>
                                                </div>

                                            </li>
                                        <!--{/for}-->
                                    </ul>
                            </div>
                        </div>
                            </div>

                        <div class="form-group">
                            <label  class="col-sm-2 control-label">预约日期：</label>
                            <div class="col-sm-10"><input class="form-control" name="sendtime" id="sendTime" readonly value="{if $sendtime}{$sendtime}{/if}" /> </div>
                        </div>

                        <div class="form-group">
                            <label  class="col-sm-2 control-label">内容：</label>
                            <div class="col-sm-10">
                                还可以输入<span  id="wordCheck">200</span>个汉字
                                <textarea class="form-control" id="content" name="content" rows="5" onkeyup="javascript:checkWords(this);"   onmousedown="javascript:checkWords(this);">{$content}</textarea>

                            </div>



                        </div>


                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">

                                <input type="hidden" name="touserid" value="{$strTouser[userid]}" />

                                <input type="hidden" name="token" value="{$_SESSION['token']}" />

                                <button type="submit" class="btn btn-success">点击预览</button>


                            </div>
                        </div>
                    </form>





                </div>
                <div class="col-md-3"></div>
            </div>



        </div>
    </div>


</div>
<script>

    $(function(e){
        $('#form1').on('submit', function(e) {
            var tplid  = getRadioValue('tplid');
            var sendtime  = $('#sendTime').val();
            var content  = $('#content').val();


            if(tplid==''){
                bootbox.alert('模板必选');
                return false;
            }

            if(sendtime==''){
                bootbox.alert('发送时间必填');
                return false;
            }

            if(content==''){
                bootbox.alert('内容必填');
                return false;
            }

            if(content.length>400){
                bootbox.alert('字数不超过200');
                return false;
            }

        });

    });

    var curDate = new Date();
    $('#sendTime').datetimepicker({
        language:  'zh-CN',
        autoclose: true,
        startDate: new Date(curDate.getTime() + 24*60*60*1000) ,
        format: 'yyyy-mm-dd',
        minView:2

    });

    var maxstrlen = 200;
    function Q(s) {
        return document.getElementById(s);
    }
    function checkWords(c) {
        len = maxstrlen;
        var str = c.value;
        myLen = getStrleng(str);
        var wck = Q("wordCheck");
        if (myLen > len * 2) {
            c.value = str.substring(0, i + 1);
        } else {
            wck.innerHTML = Math.floor((len * 2 - myLen) / 2);
        }
    }
    function getStrleng(str) {
        myLen = 0;
        i = 0;
        for (; (i < str.length) && (myLen <= maxstrlen * 2); i++) {
            if (str.charCodeAt(i) > 0 && str.charCodeAt(i) < 128)
                myLen++;
            else
                myLen += 2;
        }
        return myLen;
    }
</script>

{template footer}
